<template>
    <div class="common-table" height="100%">
        <el-table class="table" :data="tableData" height="200px" ref=“multipleTable”
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column show-overflow-tooltip v-for="item in tableLable" :key="item.prop" :label="item.label"
                width="90">
                <template slot-scope="scope">
                    <span v-if="item.prop === 'sex'" style="margin-left: 10px;">{{ scope.row[item.prop] == 0 ? '女' : '男'
                    }}</span>
                    <span v-if="item.prop === 'teachArch'" style="margin:0 auto;">
                        <el-button size="mini" @click="showTeach">查看</el-button>
                    </span>
                    <span v-if="item.prop === 'scArch'" style="margin:0 auto;">
                        <el-button size="mini" @click="showSC">查看</el-button>
                    </span>
                    <span v-else-if="item.prop !== 'sex'" style="margin-left: 10px;">{{ scope.row[item.prop] }}</span>

                </template>
            </el-table-column>
            <el-table-column v-show="isMange" label="操作" key="mange" min-width="250" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="mini" @click="handlePush(scope.row)" type="info">导出</el-button>
                    <el-button size="mini" @click="open(scope.$index)" type="danger">删除</el-button>
                    <!-- <el-button size="mini" @click="handleDelete(scope.$index)" type="danger">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :title="operateType === 'add' ? '新增用户' : '更新用户'" :visible="isShow">
            <CommonForm :formLabel="operateFormLabel" :form="storeForm" :inline="true" ref="form"
                @formChanged="formChanged" />
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="confirm">确认</el-button>
            </div>
        </el-dialog>
        <el-button size="medium" type="info">批量导出</el-button>
        <el-button size="medium" type="danger">批量删除</el-button>
        <el-pagination class="pager" layout="prev, pager, next,total" :page-sizes="[1, 2, 3, 4, 5]" :page-size="2"
            :total="config.total" :current-page.sync="curPage" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" hide-on-single-page="true">
        </el-pagination>
    </div>
</template>

<script>
import CommonForm from '@/components/commonForm'

export default {
    // 组件名称
    name: 'commonTable',
    data() {
        return {
            isShow: false,
            operateType: 'edit',
            storeData: [],
            storeForm: {},
            curPage: 1,
            multipleSelection: [],
        }
    },
    props: {
        tableLable: Array,
        tableData: Array,
        config: Object,
        operateFormLabel: Array,
        isMange: Boolean
    },
    methods: {
        handleEdit(row) {
            this.isShow = !this.isShow
            this.storeForm = row
        },
        open(index) {
            this.$confirm('此操作将永久删除该一项, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.handleDelete(index)
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleDelete(index) {
            this.storeData = this.tableData
            this.storeData.splice(index, 1)

        },
        confirm() {
            // this.tableData.push(this.operateForm)
            this.storeData = this.tableData
            console.log('this.storeForm', this.storeForm);
            this.storeData.forEach((item, i) => {
                if (item.name === this.storeForm.name) {
                    this.storeData.splice(i, 1)
                    this.storeData.push(this.storeForm)
                    this.$emit('tableChanged', this.storeData)
                }
            })
            this.$message({
                type: 'success',
                message: '编辑成功!'
            });
            this.isShow = false
        },
        cancel() {
            this.isShow = false
        },
        handleSelectionChange(val) {
            //console.log(val)  //打印选中的行
            this.arr = val;
        },
        multipleDelete() {
            this.$refs.multipleTable.selection.forEach(element => {
                this.multipleSelection.push(element)
            });
            console.log("删除选中的", this.multipleSelection);
            // this.$confirm(`将永久删除, 是否继续?`, "提示", {
            //     confirmButtonText: "确定",
            //     cancelButtonText: "取消",
            //     type: "warning"
            // }).then(() => {
            //     this.接口(this.multipleSelection)
            //         .then(() => {

            //         }).catch(err => {

            //         })

            // })
        },
        formChanged(newForm, name) {
            this.$set(this.storeForm, name, newForm)
        },
        handleCurrentChange(currentPage) {
            this.curPage = currentPage
            console.log('curpage:', this.curPage);
            console.log(`当前页: ${currentPage}`);
            this.$emit('pageChanged', currentPage)

        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        showTeach() {
            this.$router.push({
                name: 'mangementScArch'
            })
        },
        showSC() {
            this.$router.push({
                name: 'mangementTeachArch'
            })
        },

    },
    components: {
        CommonForm
    },
}
</script> 

<style scoped lang='less'>
.common-table {
    height: calc(100%-62px);
    background-color: aliceblue;
    position: relative;

    .pager {
        position: absolute;
        bottom: 0;
        right: 20px;
    }
}
</style>
